<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-08 17:07:39
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-10 09:50:55
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <drawer-frame
    title="固定菜单配置"
    submit-text="保存菜单"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <span slot="title" class="title">
      <i class="el-icon-info" />
      菜单编辑中，编辑完成后，请点击“保存菜单“按钮同步菜单信息到应用编辑界面
    </span>
    <div class="wrapper">
      <div class="left">
        <div class="fixed-menu">
          <div
            v-for="menu in menuList"
            :key="menu.id"
            class="menu"
            :class="{ current: menu.id === currentMenu.id }"
            @click="handleClickMenu(menu)"
          >
            <el-popover
              :value="
                menu.id === currentMenu.id ||
                (currentMenu.parent && menu.id === currentMenu.parent.id)
              "
              placement="top"
              trigger="manual"
              popper-class="menu-config-popper"
              :append-to-body="false"
            >
              <div
                v-for="child in menu.menuList"
                :key="child.id"
                class="children-menu"
                :class="{ current: child.id === currentMenu.id }"
                @click="handleClickMenu(child, menu)"
              >
                <i
                  v-show="child.id === currentMenu.id"
                  class="el-icon-edit icon"
                />
                {{ child.name }}
              </div>
              <div
                v-if="menu.menuList.length < 5"
                class="children-menu"
                @click="handleAddMenu({ parent: menu })"
              >
                <i class="el-icon-plus icon" />
              </div>
              <div slot="reference" class="menu-text">
                <i
                  v-show="menu.id === currentMenu.id"
                  class="el-icon-edit icon"
                />
                {{ menu.name }}
              </div>
            </el-popover>
          </div>

          <div v-if="menuList.length < 3" class="menu" @click="handleAddMenu">
            <i class="el-icon-plus icon" />
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="!currentMenu.id" class="empty">
          <i class="el-icon-edit" />
          <div>点击左侧菜单进行编辑操作</div>
        </div>
        <div v-else :key="currentMenu.id" class="edit-box">
          <div class="head">
            <div class="title">
              【
              <i class="el-icon-edit" />
              】当前正在编辑：{{ currentMenu.name }}
            </div>
            <div class="operate">
              <el-button type="text" class="danger" @click="deleteMenu">
                <i class="el-icon-delete" />
                删除菜单
              </el-button>
            </div>
          </div>
          <el-form
            ref="form"
            class="form"
            :model="currentMenu"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="菜单名称：" prop="name">
              <el-input v-model="currentMenu.name" placeholder="菜单名称" />
            </el-form-item>
            <el-form-item label="菜单内容：" prop="type">
              <el-radio-group
                v-model="currentMenu.type"
                @change="handleRadioChange"
              >
                <el-radio :label="1">
                  <svg-icon icon-class="lightning" />
                  回复消息
                </el-radio>
                <el-radio :label="2">
                  <i class="el-icon-phone-outline" />
                  拨打电话
                </el-radio>
                <el-radio :label="3">
                  <i class="el-icon-link" />
                  访问链接
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="currentMenu.type" class="card">
              <div class="title">
                使用者点击该菜单会{{
                  currentMenu.type === 1
                    ? '发送以下文本消息'
                    : currentMenu.type === 2
                    ? '自动调起通话拨打以下号码'
                    : '跳到以下链接'
                }}
              </div>
              <el-form-item
                v-if="currentMenu.type === 1"
                label="消息内容："
                prop="content"
              >
                <el-input
                  v-model="currentMenu.content"
                  placeholder="请填写消息内容"
                />
              </el-form-item>
              <el-form-item
                v-else-if="currentMenu.type === 2"
                label="呼叫号码："
                prop="phone"
              >
                <el-input
                  v-model="currentMenu.phone"
                  placeholder="请填写要拨打的号码"
                />
              </el-form-item>
              <el-form-item
                v-else-if="currentMenu.type === 3"
                label="打开链接："
                prop="link"
              >
                <el-input v-model="currentMenu.link" placeholder="请填写链接" />
              </el-form-item>
              <el-form-item v-if="currentMenu.type === 3" label="打开方式：">
                <el-radio-group v-model="currentMenu.browser">
                  <el-radio-button label="1">内部浏览器</el-radio-button>
                  <el-radio-button label="2">外部浏览器</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="currentMenu.type === 3" label="窗口高度：">
                <el-radio-group v-model="currentMenu.height">
                  <el-radio-button label="1">全屏</el-radio-button>
                  <el-radio-button label="2">半屏</el-radio-button>
                  <el-radio-button label="3">高</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </drawer-frame>
</template>
<script>
export default {
  props: {
    menus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentMenu: {},
      menuList: [],

      rules: {
        name: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'change',
          },
        ],
        type: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change',
          },
        ],
        content: [
          {
            required: true,
            message: '请输入消息内容',
            trigger: 'change',
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入呼叫号码',
            trigger: 'change',
          },
        ],
        link: [
          {
            required: true,
            message: '请输入链接',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    this.menuList = this.menus
    // this.currentMenu = this.menuList[0] || {}
  },
  methods: {
    handleRadioChange() {
      this.$refs.form.validate()
    },
    handleSubmit() {
      if (!this.$refs.form) {
        this.$emit('save', this.menuList)
        this.$emit('close')
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$emit('save', this.menuList)
            this.$emit('close')
          }
        })
      }
    },
    handleClickMenu(menu, parent) {
      if (!this.$refs.form) {
        this.currentMenu = menu
        if (parent) this.currentMenu.parent = parent
        return false
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.currentMenu = menu
          if (parent) this.currentMenu.parent = parent
        } else {
          this.$message.error('请先将表单填写完整')
        }
      })
    },

    handleAddMenu(menu) {
      if (!this.$refs.form) {
        this.addMenu(menu)
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.addMenu(menu)
          } else {
            this.$message.error('请先将表单填写完整')
          }
        })
      }
    },
    addMenu({ parent } = {}) {
      if (parent) {
        if (parent.menuList.length < 5) {
          parent.menuList.push({
            id: Date.now(),
            name: '二级菜单',
            type: 1,
            content: '回复消息',
            phone: '',
            link: '',
            browser: '2',
            height: '1',
          })
          this.$nextTick(() => {
            this.currentMenu = parent.menuList[parent.menuList.length - 1]
            this.currentMenu.parent = parent
          })
        }
      } else {
        if (this.menuList.length < 3) {
          this.menuList.push({
            id: Date.now(),
            name: '一级菜单',
            menuList: [],
            type: 1,
            content: '回复消息',
            phone: '',
            link: '',
            browser: '2',
            height: '1',
          })
          this.$nextTick(() => {
            this.currentMenu = this.menuList[this.menuList.length - 1]
          })
        }
      }
    },
    deleteMenu() {
      this.$confirm(
        '删除后此菜单下设置的全部内容将被删除，是否继续？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
        .then(() => {
          if (this.currentMenu.parent) {
            const parent = this.currentMenu.parent
            parent.menuList = parent.menuList.filter(
              menu => menu.id !== this.currentMenu.id
            )
            this.currentMenu = parent.menuList[0] || parent
          } else {
            this.menuList = this.menuList.filter(
              menu => menu.id !== this.currentMenu.id
            )
            this.currentMenu = this.menuList[0] || {}
          }
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 14px;
  font-weight: normal;
  i.el-icon-info {
    margin: 0;
    color: $primary;
    font-size: 20px;
    cursor: default;
  }
}
.wrapper {
  display: flex;
  .left {
    width: 346px;
    height: 675px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 70px 14px;
    position: relative;
    background: url(~@/assets/img/phone.png);

    .fixed-menu {
      position: absolute;
      bottom: 70px;
      left: 14px;
      right: 14px;
      height: 50px;
      line-height: 48px;
      border-top: 1px solid rgb(217, 217, 217);
      display: flex;
      align-items: center;
      .menu {
        width: 33.33%;
        flex: 1;
        text-align: center;
        cursor: pointer;
        position: relative;

        .menu-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:not(:first-child) {
          border-left: 1px solid rgba(0, 0, 0, 0.06);
        }
        &.current {
          background: rgba(0, 0, 0, 0.03);
        }
        .icon {
          color: $primary;
          font-size: 16px;
          &.el-icon-plus {
            font-weight: bold;
            font-size: 20px;
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    margin: 0 0 0 24px;
    border: 1px solid #f0f0f0;
    position: relative;
    .empty {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      text-align: center;
      .el-icon-edit {
        margin-bottom: 20px;
        font-size: 40px;
        color: $primary;
      }
    }
    .edit-box {
      .head {
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        background: rgb(250, 250, 250);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-icon-edit {
          color: $primary;
        }

        .danger {
          color: red;
        }
      }
      .form {
        padding: 20px;
        .card {
          padding: 20px;
          border: 1px solid #f0f0f0;
          .title {
            margin: -20px -20px 20px;
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            background: rgb(250, 250, 250);
          }
        }
      }
    }
  }
}
.children-menu {
  padding: 8px 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
  &:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  &.current {
    background: rgba(0, 0, 0, 0.03);
  }
  .icon {
    &.el-icon-plus {
      font-size: 16px !important;
    }
  }
}
</style>
<style lang="scss">
.menu-config-popper {
  position: absolute !important;
  top: unset !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 80px !important;
  max-width: 120px;
  padding: 0 !important;
  .popper__arrow {
    top: unset !important;
    left: 50% !important;
    transform: translateX(-50%) scale(1, -1) !important;
  }
}
</style>
